
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>实时路况</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
        }
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p{
            width:603px;
            padding-top:3px;
            overflow:hidden;
        }
        .btn{
            width:142px;
        }
        #container{
            min-width:600px;
            min-height:767px;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <script>

        window.onload = function(){


            var citylocation,marker = null;
            //直接加载地图
            //初始化地图函数  自定义函数名init
            function init() {
                //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                var map = new qq.maps.Map(document.getElementById("container"), {
                    center: new qq.maps.LatLng(39.916527,116.397128),      // 地图的中心地理坐标。
                    zoom:14                                                // 地图的中心地理坐标。
//                    scrollwheel:false
                });

                // 添加控件,比例尺
                var scaleControl = new qq.maps.ScaleControl({
                    align: qq.maps.ALIGN.BOTTOM_LEFT,
                    margin: qq.maps.Size(85, 15),
                    map: map
                });
                //添加自定义控件
                var zoomLevelControl = new qq.maps.Control(
                    {
                        content: '缩放级别:' + map.getZoom(),
                        align: qq.maps.ALIGN.TOP,
                        map: map
                    }
                );

                // 定位
                citylocation = new qq.maps.CityService({
                    complete : function(results){
                        map.setCenter(results.detail.latLng);
                        if (marker != null) {
                            marker.setMap(null);
                        }
                        marker = new qq.maps.Marker({
                            map: map,
                            position: results.detail.latLng
                        });
                    }
                });

                //实时路况图层
                var layer = new qq.maps.TrafficLayer();
                layer.setMap(map);
            }

            function showMap(value) {
                var longitude = value.coords.longitude;
                var latitude = value.coords.latitude;
                //设置经纬度信息
                var latLng = new qq.maps.LatLng( latitude,longitude);
                //调用城市经纬度查询接口实现经纬查询
                citylocation.searchCityByLatLng(latLng);

            }
            function getLocation() {
                //获取GPS坐标
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showMap, handleError, {
                        enableHighAccuracy: true,
                        maximumAge: 1000
                    });
                } else {
                    alert("您的浏览器不支持使用HTML5来获取地理位置服务");
                }
            }
            function handleError(value) {
                switch (value.code) {
                    case 1:
                        alert("位置服务被拒绝");
                        break;
                    case 2:
                        alert("暂时获取不到位置信息");
                        break;
                    case 3:
                        alert("获取信息超时");
                        break;
                    case 4:
                        alert("未知错误");
                        break;
                }
            }


            //调用初始化函数地图
            init();
            getLocation();


        }


    </script>

</head>
<body>
<!--   定义地图显示容器   -->
<div id="container"></div>
</body>
</html>
